<template>
  <div id="click-upload">
    <img id="upload" :class="{anyClick:upload.hover}"
         @mouseenter.prevent="upload.hover = true"
         @mouseout.prevent="upload.hover=false"
         @click="setShowUpload(true)"
         :src="upload.hover? upload.img2 : upload.img1"/>
  </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
  name: "click-upload",
  data() {
    return {
      upload: {
        img1: require('../../static/upload-b.png'),
        img2: require('../../static/upload-w.png'),
        hover: false,
      },
    }
  },
  methods: {
    ...mapActions(['setShowUpload']),
  }
}
</script>

<style scoped>
#upload {
  position: fixed;
  bottom: 100px;
  right: 64px;
  background-color: white;
  border: #409EFF 2px solid;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  padding: 7px;
  margin: 0;
}

#upload.anyHover {
  background-color: #409EFF;
}
</style>